<template>
  <div>
    <Adaption :num-of24="16">
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
               active-text-color="deepskyblue">
        <!--      主题项开始-->
        <router-link class="el-menu-item" :to="{path:'/index/indexContent/hot'}">
          <el-menu-item class="el-menu-item" index="1"><i class="el-icon-s-promotion"></i>热榜</el-menu-item>
        </router-link>
        <router-link class="el-menu-item" :to="{path:'/index/indexContent/follow'}">
          <el-menu-item class="el-menu-item" index="2"><i class="el-icon-star-on"></i>关注</el-menu-item>
        </router-link>
        <!--  主题项结束-->
        <!--      头像开始-->
        <router-link :to="{path:'/index/userInfo'}">
          <el-avatar style="margin-top: 5px" class="headImage"
                     :src="user.id?user.headPhoto:'/static/head-photo/headPhoto4.jpeg'"></el-avatar>
        </router-link>
        <!--              动态图标-->
        <el-dropdown id="message" trigger="click">
                  <span class="el-dropdown-link">
                    <el-badge class="mark" :value="newCommentNum+newMessageNum"
                              :hidden="newCommentNum+newMessageNum==0?true:false"/>
                    <i class="el-icon-message-solid"></i>
                  </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item class="clearfix">
              评论
              <el-badge class="mark" :value="newCommentNum" :hidden="newCommentNum==0?true:false"/>
            </el-dropdown-item>
            <el-dropdown-item class="clearfix">
              私信
              <el-badge class="mark" :value="newMessageNum" :hidden="newMessageNum==0?true:false"/>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
<!--        发布文章按钮-->
        <router-link :to="{name:'addArticle'}">
          <el-button type="primary" style="float: right;margin-top: 10px;margin-right: 10px;">发布文章</el-button>
        </router-link>
      </el-menu>
    </Adaption>
  </div>
</template>
<script>
import Adaption from './Adaption'

export default {
  components: {Adaption},
  data () {
    return {
      activeIndex: '1',
      activeIndex2: '1'
    }
  },
  methods: {
    handleSelect (key, keyPath) {
      console.log(key, keyPath)
    }
  },
  props: {newMessageNum: Number, newCommentNum: Number, user: Object}
}
</script>
<style scoped>
.headImage {
  float: right;
  margin-right: 5%;
}

.el-icon-message-solid {
  float: right;
  font-size: 28px;
  line-height: 46px;
  padding-right: 20px;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

#message {
  float: right;
  margin-top: 5px;
}

.el-menu-demo, .el-menu-item {
  border-bottom-color: #ffffff !important;
}
</style>
